<template>
    <el-main>
      <div class="homeContainer">
        <!--  发展大事件    -->
        <div class="events">
          <div class="events_title">
            <div class="titleB">
              <b></b>
              <span></span>
            </div>
            <h2>发展大事记</h2>
            <div class="titleB">
              <span></span>
              <b></b>
            </div>
          </div>
          <div class="events_content">
            <div class="event" @click="pathTo()">
              <el-image :src="caseUrl3" fit="cover"></el-image>
              <ul class="contents">
                <li>
                  <div class="data">2020.3</div>
                  <div class="text">与浙报集团共同成立浙商新媒体联盟</div>
                </li>
                <li>
                  <div class="data">2019.12</div>
                  <div class="text">签署六方战略合作协议，打造数字营销产教融合服务平台</div>
                </li>
                <li>
                  <div class="data">2019.11</div>
                  <div class="text">签署JNE合作协议</div>
                </li>
                <li>
                  <div class="data">2019.9</div>
                  <div class="text">引入赛伯乐战略投资</div>
                </li>
              </ul>
            </div>
            <div class="event" @click="pathTo()">
              <el-image :src="caseUrl2" fit="cover"></el-image>
              <ul class="contents">
                <li>
                  <div class="data">2018.12</div>
                  <div class="text">推出跨境电商营销业务</div>
                </li>
                <li>
                  <div class="data">2017.11</div>
                  <div class="text">成立微赞，积极探索城市新媒体营销</div>
                </li>
                <li>
                  <div class="data">2017.6</div>
                  <div class="text">成立香港乐汇，布局海外市场</div>
                </li>
                <li>
                  <div class="data">2017.2</div>
                  <div class="text">注并全面开展国内广告业务</div>
                </li>
              </ul>
            </div>
            <div class="event" @click="pathTo()">
              <el-image :src="caseUrl1" fit="cover"></el-image>
              <ul class="contents">
                <li>
                  <div class="data">2016</div>
                  <div class="text">"旭米广告平台"斩获2016年度创新应用/平台</div>
                </li>
                <li>
                  <div class="data">2016.4</div>
                  <div class="text">代理发行业务拓展SDK智能推广服务</div>
                </li>
                <li>
                  <div class="data">2014.9</div>
                  <div class="text">公司注册成立</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--   Labels   -->
        <div class="Labels">
          <div class="labelContainer">
            <div class="label">
              <h3>新闻</h3>
              <div class="label_background backgroundOne">
                <div class="labelTitle">我们在行动</div>
                <div>
                  <span>深化融合发展</span>
                  <span>顺应时代新趋势</span>
                </div>
              </div>
              <ul class="ul">
                <a @click="toDetails(4)">
                  <li class="dot">杭州旭航与浙江传媒战略合作，全面升级浙商新媒体</li>
                </a>
                <router-link to="/News">
                  <li class="dot">为杭州2022年亚运会的支持</li>
                </router-link>
                <router-link to="/News">
                  <li class="dot">新冠病毒疫情期间帮助政府在新媒体上的支持</li>
                </router-link>
              </ul>
            </div>
            <div class="label">
              <h3>繁星计划</h3>
              <div class="label_background backgroundTwo">
                <div class="labelTitle">繁星计划</div>
                <div>
                  <div class="smallTitle">我们的目标</div>
                  <span>稳步扩张</span>
                  <span>海内海外</span>
                  <span>共赢未来</span>
                </div>
              </div>
              <ul class="ul">
                <li class="wholeLi">目前，杭州旭航除了国内已经布局的如：杭州、北京、上海、深圳、广州等一线城市以外，业务已遍布全国10几个省份城市及东南亚城市。通过“繁星计划”，预计2020年在国内10个人口在300万-800万之间的二三线城市和2个海外国家全面开展区域新媒体的综合性服务。</li>
              </ul>
            </div>
            <div class="label">
              <h3>优势资源</h3>
              <div class="label_background backgroundThree">
                <div class="labelTitle">优势资源</div>
                <ul class="ul2">
                  <li>创意内容</li>
                  <li>新媒体团队</li>
                  <li>客户运营</li>
                  <li>海外资源</li>
                  <li>数字互动</li>
                  <li>媒体资源</li>
                  <li>文娱资源</li>
                  <li>技术支撑</li>
                </ul>
              </div>
              <ul class="ul">
                <router-link to="/AboutUs/introduce">
                  <li class="dot">与新浪、腾讯、百度、网易、搜狐等各大门户均已形成战略合作伙伴关系</li>
                </router-link>
                <router-link to="/AboutUs/introduce">
                  <li class="dot">与JNE达成线上线下资源全面合作</li>
                </router-link>
                <router-link to="/AboutUs/introduce">
                  <li class="dot">3,000+家跨媒体营销渠道资源</li>
                </router-link>
                <router-link to="/AboutUs/introduce">
                  <li class="dot">500+家高端核心媒体渠道资源</li>
                </router-link>
                <router-link to="/AboutUs/introduce">
                  <li class="dot">100+人的专业媒介运营团队</li>
                </router-link>
              </ul>
<!--              <ul class="ul">-->
<!--                <li class="wholeLi">；；；</li>-->
<!--              </ul>-->
            </div>
          </div>
        </div>
        <foot-view></foot-view>
      </div>
    </el-main>
</template>

<script>
import caseUrl1 from '@/assets/img/Home/2014-2016.png'
import caseUrl2 from '@/assets/img/Home/2017.png'
import caseUrl3 from '@/assets/img/Home/2018-2019.png'
export default {
  name: 'Home',
  data () {
    return {
      // 发展大事件三张图
      caseUrl1: caseUrl1,
      caseUrl2: caseUrl2,
      caseUrl3: caseUrl3,
    }
  },
  methods: {
    // 跳转
    pathTo(){
      this.$store.dispatch('hideNavHome')
      this.$store.dispatch('changeActiveIndexY','2')
      this.$router.push({
        path:"/AboutUs/history"
      })
    },
    // 点击跳转详情页
    toDetails(index){
      this.$store.dispatch('hideNavHome')
      this.$store.dispatch('changeActiveIndexY','5')
      this.$router.push({
        path: '/News/details',
        query: { id : index}
      })
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .el-main{
    width: 100%;
    padding: 0;
    position: relative;
    background-color: #f4f4f4;
    min-width: 120rem;
    // 内容
    .homeContainer{
      width: 100%;
      padding: 0;
      // 发展大事件
      .events{
        width: 100rem;
        margin: 0 auto 4.6rem;
        .events_title{
          margin: 3.3rem auto;
          display: flex;
          justify-content: center;
          align-items: center;
          .titleB{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            b{
              background: #333;
              margin-top: .5rem;
              display: inline-block;
              width: 8.3rem;
              height: 2px;
              vertical-align: middle;
            }
            span{
              width: .42rem;
              height: .42rem;
              margin-top: .5rem;
              border-radius: 100%;
              background-color: #333333;
              display: inline-block;
            }
          }

          h2{
            vertical-align: middle;
            font-size: 2.66rem;
            color: #333;
            padding: 0 2.66rem;
            font-weight: 400;
            margin: 0;
          }
        }
        .events_content{
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .event{
            width: 31.69rem;
            height: 38.3rem;
            background: #fff;
            /*margin-right: .24rem;*/
            text-decoration: none;
            position: relative;
            cursor: pointer;
            .el-image{
              width: 100%;
              height: 230px;
            }
            .contents{
              padding: 1.33rem 2.67rem;
              li{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                line-height: 1.67rem;
                margin-bottom: 1.33rem;
                font-size: 1.25rem;
                .data{
                  /*font-family: 'fontMedium';*/
                  font-weight: 500;
                  color: #222222;
                  margin-right: 1.33rem;
                  width: 4.16rem;
                  font-size: 1.166rem;
                  text-align: left;
                }
                .text{
                  color: #99a;
                  -webkit-box-flex: 1;
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  text-align: left;
                }
              }
            }
          }
        }
      }
      // Labels
      .Labels{
        width: 100%;
        background-color: #ffffff;
        .labelContainer{
          width: 100rem;
          height: 37rem;
          margin: 0 auto;
          padding-top: 4rem;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          .label{
            width: 31.66rem;
            position: relative;
            .label_background{
              width: 100%;
              height: 12rem;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 1.66rem;
              // 左半部分
              .labelTitle{
                color: #ffffff;
                font-size: 2.5rem;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              // 右半部分
              div:nth-child(2){
                color: #fefefe;
                .smallTitle{
                  /*font-family: 'fontRegular';*/
                  font-size: 1.16rem;
                  font-weight: 400;
                  line-height: 3rem;
                  text-align: left;
                }
                font-size: 1rem;
                /*font-family: 'fontLight';*/
                display: flex;
                font-weight: 300;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                line-height: 1.8rem;
              }
            }
            .backgroundOne{
              background: url("../assets/img/Home/1.png");
              .labelTitle{
                width: 63%;
              }
              div:nth-child(2){
                width: 37%;
              }
            }
            .backgroundTwo{
              background: url("../assets/img/Home/2.png");
              .labelTitle{
                width: 61%;
              }
              div:nth-child(2){
                width: 39%;
              }
            }
            .backgroundThree{
              background: url("../assets/img/Home/3.png");
              .labelTitle{
                width: 57%;
              }
              .ul2{
                width: 43%;
                height: 55%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                padding: 0;
                list-style: none;
                li{
                  width: 40%;
                  line-height: 1.71;
                  /*font-family: 'fontLight';*/
                  font-size:1rem;
                  color: #ffffff;
                  text-align: left;
                  padding: 0;
                }
              }
            }
            h3{
              line-height: 2.083rem;
              color: #444444;
              font-size: 1.66rem;
              font-weight: 300;
              margin-bottom: 2.5rem;
              text-align: left;
            }
            .ul{
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              padding: 0;
              a{
                text-decoration: none;
                color: #aaaaaa;
                background-color: transparent;
                -webkit-transition: color .3s;
                transition: color .3s;
                text-decoration: none;
              }
              a:hover{
                text-decoration: underline;
                cursor: pointer;
              }
              li{
                display: block;
                line-height: 1.71;
                font-size:1.16rem;
                color: #aaaaaa;
                position: relative;
                padding-left: 1.08rem;
                text-align: left;
              }
              .wholeLi{
                padding: 0;
              }
              .dot:after{
                content: "";
                width: .42rem;
                height: .42rem;
                border-radius: 100%;
                background: #ccc;
                position: absolute;
                left: 0;
                top: 0.75rem;
              }
            }
          }
        }
      }

    }
  }
</style>
